<template>
  <div class="wrapper" :style='{background: "url(" + backImg + ")"}'>
    <div class="main-content">
      <el-row :gutter="24">
        <el-col :sm="8" :xs="24">
          <page-quick-service-part :img="car" title='Free Shipping'
            describe="Variations of passages of lorem isum is available here."/>
        </el-col>
        <el-col :sm="8" :xs="24">
          <page-quick-service-part :img="retry" title='Return Gerantee'
            describe="Variations of passages of lorem isum is available here."/>
        </el-col>
        <el-col :sm="8" :xs="24">
          <page-quick-service-part :img="card" title='Easy Payment Policy'
            describe="Variations of passages of lorem isum is available here."/>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import backImg from '@img/pattern.png'
import car from '@img/icons/car.svg'
import retry from '@img/icons/retry.svg'
import card from '@img/icons/card.svg'
import PageQuickServicePart from '@/views/part/index/PageQuickServicePart'

export default {
  name: 'PageQuickService',
  components: {
    'page-quick-service-part': PageQuickServicePart
  },
  data () {
    return {
      backImg: backImg,
      car: car,
      retry: retry,
      card: card
    }
  }
}
</script>

<style lang="scss" scoped>

  .wrapper{
    padding: 20px 0;

    .main-content{
      max-width: 1110px;
      width: 100%;
      margin: 0 auto;
    }
  }

</style>
